<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" ></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" >

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
</head>
<body>
<h1>商品添加页面</h1>
<form id="form">
<!--    商品的基本信息-->
    <div class="form-group form-inline">
        <label for="category_level_1">一级分类</label>
        <select name="category_level_1" id="category_level_1" class="form-control">
            <option value="">请选择品牌</option>
        </select>
    </div>
    <div class="form-group form-inline">
        <label for="category_level_2">二级分类</label>
        <select name="category_level_2" id="category_level_2" class="form-control">
            <option value="">请选择品牌</option>
        </select>
    </div>

    <div class="form-group form-inline">
        <label for="category_level_3">三级分类</label>
        <select name="category_level_3" id="category_level_3" class="form-control">
            <option value="">请选择品牌</option>
        </select>
    </div>

    <div class="form-group form-inline">
        <label for="goods_name">商品名称</label>
        <input type="text" class="form-control" id="goods_name" name="goods_name" placeholder="请填写商品名称">
    </div>
    <div class="form-group form-inline">
        <label for="goods_name">商品logo</label>
        <input type="file" class="form-control" name="goods_logo" id="goods_logo" placeholder="">
    </div>

    <div class="form-group form-inline">
        <label for="brand_id">商品品牌</label>
        <select name="brand_id" id="brand_id" class="form-control">
            <option value="">请选择品牌</option>
        </select>
    </div>

    <div class="form-group form-inline">
        <label for="goods_detail">商品详情</label>
        <textarea name="goods_detail" id="" cols="30" rows="10" class="form-control"></textarea>
    </div>
<!--    商品规格信息-->
    <h3>商品规格信息</h3>

    <div class="form-group form-inline">
        <label for="spec_info">规格信息</label>
        <input type="text" name="spec_info" class="form-control">
    </div>
    <div class="form-group form-inline">
        <label for="cost_price">成本价</label>
        <input type="text" name="cost_price" class="form-control">
    </div>
    <div class="form-group form-inline">
        <label for="market_price">市场价</label>
        <input type="text" name="market_price" class="form-control">
    </div>
    <div class="form-group form-inline">
        <label for="price">售价</label>
        <input type="text" name="price" class="form-control">
    </div>
    <h3>商品属性</h3>
    <div class="form-group form-inline">
        <label for="attr">毛重</label>
        <input type="text" name="attr[]" class="form-control">
    </div>
    <div class="form-group form-inline">
        <label for="attr">净重</label>
        <input type="text" name="attr[]" class="form-control">
    </div>
    <button type="button" class="btn btn-default">添加</button>
</form>

<script>
    $(function () {
        $('button').click(function () {
            // 获取表单数据
            let  from_data = document.getElementById('form');//原生的js获取值、出现异常
            let  fromData = new FormData(from_data);// 构造一个表单一摸一样的结构

            // 添加数据里面追加token
            // var token = window.localStorage.getItem('token');
            // fromData.append('token',token);
            $.ajax({
                url:"/api/goods",
                data:fromData,
                dataType:'json',
                processData:false,// 设置不转化格式、
                contentType:false,
                type:'POST',
                success:function (response) {
                    if (response.code == 200) {
                        location.href='/front/list';
                    }
                }
            })
        })
    })
</script>

</body>
</html>